<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粮食收购大数据平台</title>
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 30px;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .company-logo-small {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px solid #e0e0e0;
        }
        
        .company-logo-small img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .company-info {
            display: flex;
            flex-direction: column;
        }
        
        .company-name-small {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
            margin: 0;
        }
        
        .company-desc-small {
            font-size: 12px;
            color: #7f8c8d;
            margin: 0;
        }
        
        .platform-title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            text-align: center;
            flex: 1;
        }
        
        .login-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .main-container {
            width: 95%;
            max-width: 1400px;
            margin: 20px 0 20px 2%; /* 左侧边距设为2%，右侧自动 */
            padding: 0 2%;
            position: relative; /* 相对定位 */
        }
        
        .sidebar {
            display: none; /* 隐藏侧边栏 */
        }
        
        .menu-section {
            margin-bottom: 25px;
        }
        
        .menu-title {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #ecf0f1;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .menu-item {
            padding: 10px 15px;
            margin: 5px 0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #34495e;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .menu-item:hover {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            transform: translateX(5px);
        }
        
        .menu-item.active {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
        }
        
        .menu-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
        
        .content-section {
             width: 90%; /* 减少宽度为90% */
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(10px);
             border-radius: 15px;
             padding: 2.5% 3%;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
             min-height: calc(100vh - 200px);
             position: relative; /* 相对定位 */
             left: 0; /* 向左对齐 */
             margin-right: auto; /* 右侧自动边距 */
         }
         
         .filter-section {
             margin-bottom: 30px;
         }
         
         .filter-title {
             font-size: 18px;
             font-weight: bold;
             color: #2c3e50;
             margin-bottom: 20px;
             display: flex;
             align-items: center;
             gap: 10px;
         }
         
         .filter-form {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 15px;
             margin-bottom: 20px;
         }
         
         @media (max-width: 768px) {
             .filter-form {
                 grid-template-columns: 1fr;
                 gap: 10px;
             }
         }
         
         .filter-buttons {
             display: flex;
             gap: 10px;
             justify-content: flex-end;
         }
         
         .data-section {
             margin-top: 30px;
         }
         
         .data-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .query-result-section {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .result-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .personal-info {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
        
        @media (max-width: 768px) {
            .personal-info {
                flex-direction: column;
                gap: 10px;
                padding: 12px;
            }
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .info-item .label {
            font-weight: bold;
            color: #666;
        }
        
        .info-item .value {
            color: #2c3e50;
        }
        
        .records-section {
            margin-top: 20px;
        }
        
        .records-title {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .records-table {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .table-header {
            background: #f5f5f5;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
            font-weight: bold;
            color: #333;
        }
        
        .table-body {
            background: white;
        }
        
        .table-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
            border-bottom: 1px solid #f0f0f0;
        }
        
        @media (max-width: 768px) {
            .table-header,
            .table-row {
                grid-template-columns: 1fr 1fr;
                font-size: 12px;
            }
            
            .col {
                padding: 8px 10px;
            }
        }
        
        @media (max-width: 480px) {
            .table-header,
            .table-row {
                grid-template-columns: 1fr;
                text-align: left;
            }
            
            .col {
                padding: 6px 8px;
                border-right: none;
                border-bottom: 1px solid #f0f0f0;
            }
        }
        
        .table-row:last-child {
            border-bottom: none;
        }
        
        .table-row:hover {
            background: #f9f9f9;
        }
        
        .col {
            padding: 12px 15px;
            text-align: center;
            border-right: 1px solid #f0f0f0;
        }
        
        .col:last-child {
            border-right: none;
        }
        
        .id-query-section {
            text-align: center;
            padding: 40px 20px;
        }
        
        .query-title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .query-subtitle {
            color: #7f8c8d;
            margin-bottom: 30px;
            font-size: 14px;
        }
        
        .query-form {
            max-width: 400px;
            margin: 0 auto;
        }
        
        .query-input {
            width: 100%;
            margin-bottom: 20px;
        }
        
        .query-btn {
            width: 100%;
            height: 45px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            color: white;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .query-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .query-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .login-required {
            text-align: center;
            padding: 60px 20px;
            color: #95a5a6;
        }
        
        .login-required i {
            font-size: 48px;
            margin-bottom: 20px;
            display: block;
        }
        
        .login-required h3 {
            margin: 0 0 10px 0;
            font-size: 20px;
        }
        
        .login-required p {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
        }
        
        /* 中间内容区域 */
        .content-area {
            flex: 1;
            padding: 20px;
            position: relative;
        }
        
        /* 条件筛选栏 */
        .filter-section {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .filter-title {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .filter-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filter-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-label {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
        }
        
        /* 数据列表区域 */
        .data-section {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            min-height: 500px;
        }
        
        .data-title {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .data-stats {
            font-size: 12px;
            color: #7f8c8d;
        }
        
        /* 未登录提示 */
        .login-prompt {
            text-align: center;
            padding: 60px 20px;
            color: #7f8c8d;
        }
        
        .login-prompt-icon {
            font-size: 48px;
            margin-bottom: 20px;
            color: #bdc3c7;
        }
        
        .login-prompt h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .login-prompt p {
            font-size: 14px;
            line-height: 1.6;
        }
        
        /* 禁用状态样式 */
        .disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        
        /* 内嵌导航菜单样式 */
        .inline-nav {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: center;
        }
        
        .nav-section {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .nav-section-title {
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
        }
        
        /* iframe容器样式 */
        .page-iframe-container {
            width: 100%;
            height: 800px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .page-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .main-container {
                width: 98%;
                padding: 0 1%;
                margin: 15px 0 15px 1%; /* 保持左侧定位 */
            }
            
            .content-section {
                padding: 2% 2.5%;
                width: 92%; /* 调整宽度 */
            }
        }
        
        @media (max-width: 768px) {
            .main-container {
                width: 100%;
                padding: 0 10px;
                margin: 10px 0 10px 5px; /* 保持左侧定位 */
            }
            
            .content-section {
                padding: 15px;
                border-radius: 10px;
                min-height: calc(100vh - 150px);
                width: 95%; /* 移动端调整宽度 */
            }
            
            .header {
                padding: 10px 15px;
            }
            
            .platform-title {
                font-size: 18px;
            }
            
            .filter-row {
                flex-direction: column;
                align-items: stretch;
            }
            
            .filter-item {
                justify-content: space-between;
            }
            
            .inline-nav {
                flex-direction: column;
                align-items: stretch;
                padding: 15px;
            }
            
            .nav-section {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }
            
            .page-iframe-container {
                height: 500px;
            }
        }
        
        @media (max-width: 480px) {
            .main-container {
                margin: 5px 0 5px 3px; /* 保持左侧定位 */
            }
            
            .content-section {
                padding: 10px;
                border-radius: 8px;
                width: 97%; /* 小屏幕调整宽度 */
            }
            
            .header {
                padding: 8px 10px;
            }
            
            .platform-title {
                font-size: 16px;
            }
            
            .page-iframe-container {
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部标题栏 -->
        <div class="header">
            <!-- 左侧公司信息 -->
            <div class="header-left">
                <div class="company-logo-small">
                    <img src="logo.svg" alt="新疆奎木星测控技术有限公司">
                </div>
                <div class="company-info">
                    <div class="company-name-small">新疆奎木星测控技术有限公司</div>
                    <div class="company-desc-small">KMX-TECH</div>
                </div>
            </div>
            
            <!-- 中间平台标题 -->
            <div class="platform-title">
                <i class="fas fa-seedling"></i> 粮食收购大数据平台
            </div>
            
            <!-- 右侧登录/登出按钮 -->
            <el-button :type="isLoggedIn ? 'danger' : 'primary'" @click="goToLogin" class="login-btn">
                <i :class="isLoggedIn ? 'fas fa-sign-out-alt' : 'fas fa-sign-in-alt'"></i> 
                {{ isLoggedIn ? '登出' : '登录' }}
            </el-button>
        </div>

        <div class="main-container">
            <!-- 左侧菜单栏已移除，现在使用顶部导航或内嵌菜单 -->

            <!-- 主要内容区域 -->
            <div class="content-section">
                <!-- 未登录状态 - 仅显示身份证查询 -->
                <div v-if="!isLoggedIn" class="id-query-section">
                    <div class="query-title">
                        <i class="fas fa-id-card"></i> 身份证查询
                    </div>
                    <div class="query-subtitle">请输入18位身份证号码查询个人收购记录</div>
                    
                    <div class="query-form">
                        <el-input 
                            v-model="idCard" 
                            placeholder="请输入18位身份证号码" 
                            class="query-input"
                            maxlength="18"
                            show-word-limit
                            clearable>
                            <template #prepend>
                                <i class="fas fa-id-card"></i>
                            </template>
                        </el-input>
                        
                        <el-button 
                            type="primary" 
                            @click="searchByIdCard" 
                            :loading="searching"
                            :disabled="!isValidIdCard"
                            class="query-btn">
                            <i class="fas fa-search"></i> 
                            {{ searching ? '查询中...' : '开始查询' }}
                        </el-button>
                    </div>
                    
                    <!-- 查询结果提示 -->
                            <div v-if="!isValidIdCard && idCard" style="margin-top: 15px; color: #f56c6c; font-size: 14px;">
                                <i class="fas fa-exclamation-triangle"></i> 请输入正确的18位身份证号码格式
                            </div>
                            
                            <!-- 查询结果展示 -->
                            <div v-if="searchResult" class="query-result-section" style="margin-top: 30px;">
                                <div class="result-title">
                                    <i class="fas fa-list-alt"></i> 查询结果
                                </div>
                                
                                <!-- 个人信息 -->
                                <div class="personal-info">
                                    <div class="info-item">
                                        <span class="label">姓名：</span>
                                        <span class="value">{{ searchResult.name }}</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">身份证号：</span>
                                        <span class="value">{{ maskedIdCard }}</span>
                                    </div>
                                </div>
                                
                                <!-- 收购记录 -->
                                <div class="records-section">
                                    <div class="records-title">
                                        <i class="fas fa-table"></i> 收购记录
                                    </div>
                                    
                                    <div class="records-table">
                                        <div class="table-header">
                                            <div class="col">收购日期</div>
                                            <div class="col">粮食品种</div>
                                            <div class="col">数量(公斤)</div>
                                            <div class="col">单价(元/公斤)</div>
                                            <div class="col">收购企业</div>
                                        </div>
                                        
                                        <div class="table-body">
                                            <div v-for="(record, index) in searchResult.records" :key="index" class="table-row">
                                                <div class="col">{{ record.date }}</div>
                                                <div class="col">{{ record.grainType }}</div>
                                                <div class="col">{{ record.amount }}</div>
                                                <div class="col">{{ record.price }}</div>
                                                <div class="col">{{ record.company }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                
                <!-- 登录后的功能界面 -->
                <div v-else>
                    <!-- 内嵌导航菜单 -->
                    <div class="inline-nav">
                        <div class="nav-section">
                            <span class="nav-section-title">数据查询</span>
                            <el-button-group>
                                <el-button :type="activeMenu === 'id-query' ? 'primary' : 'default'" @click="setActiveMenu('id-query')" size="small">
                                    <i class="fas fa-id-card"></i> 身份证查询
                                </el-button>
                                <el-button :type="activeMenu === 'data-filter' ? 'primary' : 'default'" @click="setActiveMenu('data-filter')" size="small">
                                    <i class="fas fa-filter"></i> 数据查询
                                </el-button>
                                <el-button :type="activeMenu === 'statistics' ? 'primary' : 'default'" @click="setActiveMenu('statistics')" size="small">
                                    <i class="fas fa-chart-bar"></i> 统计分析
                                </el-button>
                            </el-button-group>
                        </div>
                        
                        <div class="nav-section">
                            <span class="nav-section-title">系统管理</span>
                            <el-button-group>
                                <el-button :type="activeMenu === 'user-mgmt' ? 'primary' : 'default'" @click="setActiveMenu('user-mgmt')" size="small">
                                    <i class="fas fa-users"></i> 用户管理
                                </el-button>
                                <el-button :type="activeMenu === 'permission' ? 'primary' : 'default'" @click="setActiveMenu('permission')" size="small">
                                    <i class="fas fa-shield-alt"></i> 权限管理
                                </el-button>
                                <el-button :type="activeMenu === 'data-mgmt' ? 'primary' : 'default'" @click="setActiveMenu('data-mgmt')" size="small">
                                    <i class="fas fa-database"></i> 数据管理
                                </el-button>
                            </el-button-group>
                        </div>
                        
                        <div class="nav-section">
                            <span class="nav-section-title">报表中心</span>
                            <el-button-group>
                                <el-button :type="activeMenu === 'daily-report' ? 'primary' : 'default'" @click="setActiveMenu('daily-report')" size="small">
                                    <i class="fas fa-calendar-alt"></i> 日报表
                                </el-button>
                                <el-button :type="activeMenu === 'weekly-report' ? 'primary' : 'default'" @click="setActiveMenu('weekly-report')" size="small">
                                    <i class="fas fa-calendar-week"></i> 周报表
                                </el-button>
                                <el-button :type="activeMenu === 'monthly-report' ? 'primary' : 'default'" @click="setActiveMenu('monthly-report')" size="small">
                                    <i class="fas fa-calendar"></i> 月报表
                                </el-button>
                            </el-button-group>
                        </div>
                    </div>
                    
                    <!-- 页面内容区域 -->
                    <!-- 身份证查询界面 -->
                    <div v-if="activeMenu === 'id-query'" class="id-query-section">
                        <div class="query-title">
                            <i class="fas fa-id-card"></i> 身份证查询
                        </div>
                        <div class="query-subtitle">请输入18位身份证号码查询个人收购记录</div>
                        
                        <div class="query-form">
                            <el-input 
                                v-model="idCard" 
                                placeholder="请输入18位身份证号码" 
                                class="query-input"
                                maxlength="18"
                                show-word-limit
                                clearable>
                                <template #prepend>
                                    <i class="fas fa-id-card"></i>
                                </template>
                            </el-input>
                            
                            <el-button 
                                type="primary" 
                                @click="searchByIdCard" 
                                :loading="searching"
                                :disabled="!isValidIdCard"
                                class="query-btn">
                                <i class="fas fa-search"></i> 
                                {{ searching ? '查询中...' : '开始查询' }}
                            </el-button>
                        </div>
                        
                        <!-- 查询结果提示 -->
                        <div v-if="!isValidIdCard && idCard" style="margin-top: 15px; color: #f56c6c; font-size: 14px;">
                            <i class="fas fa-exclamation-triangle"></i> 请输入正确的18位身份证号码格式
                        </div>
                        
                        <!-- 查询结果展示 -->
                        <div v-if="searchResult" class="query-result-section" style="margin-top: 30px;">
                            <div class="result-title">
                                <i class="fas fa-list-alt"></i> 查询结果
                            </div>
                            
                            <!-- 个人信息 -->
                            <div class="personal-info">
                                <div class="info-item">
                                    <span class="label">姓名：</span>
                                    <span class="value">{{ searchResult.name }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">身份证号：</span>
                                    <span class="value">{{ maskedIdCard }}</span>
                                </div>
                            </div>
                            
                            <!-- 收购记录 -->
                            <div class="records-section">
                                <div class="records-title">
                                    <i class="fas fa-table"></i> 收购记录
                                </div>
                                
                                <div class="records-table">
                                    <div class="table-header">
                                        <div class="col">收购日期</div>
                                        <div class="col">粮食品种</div>
                                        <div class="col">数量(公斤)</div>
                                        <div class="col">单价(元/公斤)</div>
                                        <div class="col">收购企业</div>
                                    </div>
                                    
                                    <div class="table-body">
                                        <div v-for="(record, index) in searchResult.records" :key="index" class="table-row">
                                            <div class="col">{{ record.date }}</div>
                                            <div class="col">{{ record.grainType }}</div>
                                            <div class="col">{{ record.amount }}</div>
                                            <div class="col">{{ record.price }}</div>
                                            <div class="col">{{ record.company }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据筛选界面 -->
                    <div v-else-if="activeMenu === 'data-filter'" class="filter-section">
                        <div class="filter-title">
                            <i class="fas fa-filter"></i> 数据筛选条件
                        </div>
                        
                        <div class="filter-form">
                            <el-select v-model="filters.period" placeholder="选择周期">
                                <el-option label="最近7天" value="7d"></el-option>
                                <el-option label="最近30天" value="30d"></el-option>
                                <el-option label="最近90天" value="90d"></el-option>
                                <el-option label="最近一年" value="1y"></el-option>
                            </el-select>
                            
                            <el-select v-model="filters.grainType" placeholder="粮食种类">
                                <el-option label="小麦" value="wheat"></el-option>
                                <el-option label="玉米" value="corn"></el-option>
                                <el-option label="大豆" value="soybean"></el-option>
                                <el-option label="水稻" value="rice"></el-option>
                            </el-select>
                            
                            <el-select v-model="filters.region" placeholder="收购地区">
                                <el-option label="华北地区" value="north"></el-option>
                                <el-option label="华南地区" value="south"></el-option>
                                <el-option label="华东地区" value="east"></el-option>
                                <el-option label="华西地区" value="west"></el-option>
                            </el-select>
                            
                            <el-input v-model="filters.minPrice" placeholder="最低价格">
                                <template #append>元/吨</template>
                            </el-input>
                            
                            <el-input v-model="filters.maxPrice" placeholder="最高价格">
                                <template #append>元/吨</template>
                            </el-input>
                        </div>
                        
                        <div class="filter-buttons">
                            <el-button @click="resetFilters">重置</el-button>
                            <el-button type="primary" @click="applyFilters">应用筛选</el-button>
                        </div>
                        
                        <!-- 筛选结果数据表格 -->
                        <div class="data-section" style="margin-top: 30px;">
                            <div class="data-title">
                                <i class="fas fa-table"></i> 筛选结果
                            </div>
                            
                            <el-table :data="filteredData" style="width: 100%" stripe>
                                <el-table-column prop="date" label="收购日期" width="120"></el-table-column>
                                <el-table-column prop="farmerName" label="农户姓名" width="100"></el-table-column>
                                <el-table-column prop="grainType" label="粮食种类" width="100"></el-table-column>
                                <el-table-column prop="quantity" label="数量(吨)" width="100"></el-table-column>
                                <el-table-column prop="price" label="单价(元/吨)" width="120"></el-table-column>
                                <el-table-column prop="totalAmount" label="总金额(元)" width="120"></el-table-column>
                                <el-table-column prop="region" label="地区" width="100"></el-table-column>
                                <el-table-column prop="status" label="状态" width="100">
                                    <template #default="scope">
                                        <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">
                                            {{ scope.row.status }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                            
                            <div style="margin-top: 20px; text-align: right;">
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handlePageChange"
                                    :current-page="currentPage"
                                    :page-sizes="[10, 20, 50, 100]"
                                    :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="filteredData.length">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户管理页面 -->
                    <div v-else-if="activeMenu === 'user-mgmt'" class="page-iframe-container">
                        <iframe src="pages/user-management.html" class="page-iframe" frameborder="0"></iframe>
                    </div>
                    
                    <!-- 权限管理页面 -->
                    <div v-else-if="activeMenu === 'permission'" class="page-iframe-container">
                        <iframe src="pages/permission-management.html" class="page-iframe" frameborder="0"></iframe>
                    </div>
                    
                    <!-- 其他功能界面占位 -->
                    <div v-else class="feature-placeholder">
                        <div style="text-align: center; padding: 60px 20px; color: #95a5a6;">
                            <i class="fas fa-cog" style="font-size: 48px; margin-bottom: 20px; display: block;"></i>
                            <h3 style="margin: 0 0 10px 0; font-size: 20px;">功能开发中</h3>
                            <p style="margin: 0; font-size: 14px; line-height: 1.6;">该功能正在开发中<br>敬请期待</p>
                        </div>
                    </div>
                </div>
            </div>
        
        <!-- 查询结果对话框 -->
        <el-dialog
            v-model="showResult"
            title="查询结果"
            width="90%"
            :max-width="600"
            center
        >
            <div v-if="searchResult">
                <!-- 个人信息 -->
                <el-card style="margin-bottom: 20px;">
                    <template #header>
                        <div style="display: flex; align-items: center;">
                            <el-icon style="margin-right: 8px;"><User /></el-icon>
                            <span>个人信息</span>
                        </div>
                    </template>
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="姓名">{{ searchResult.name }}</el-descriptions-item>
                        <el-descriptions-item label="身份证号">{{ maskedIdCard }}</el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <!-- 收购记录 -->
                <el-card>
                    <template #header>
                        <div style="display: flex; align-items: center; justify-content: space-between;">
                            <div>
                                <el-icon style="margin-right: 8px;"><Document /></el-icon>
                                <span>收购记录</span>
                            </div>
                            <el-tag type="info">共 {{ searchResult.records.length }} 条记录</el-tag>
                        </div>
                    </template>
                    
                    <el-table :data="searchResult.records" stripe style="width: 100%">
                        <el-table-column prop="date" label="收购日期" width="120"></el-table-column>
                        <el-table-column prop="grainType" label="粮食品种" width="100"></el-table-column>
                        <el-table-column prop="amount" label="数量(公斤)" width="120"></el-table-column>
                        <el-table-column prop="price" label="单价(元/公斤)" width="130"></el-table-column>
                        <el-table-column prop="company" label="收购企业"></el-table-column>
                    </el-table>
                </el-card>
            </div>
            
            <div v-else style="text-align: center; padding: 40px;">
                <el-empty description="未查询到相关收购记录">
                    <el-button type="primary" @click="showResult = false">重新查询</el-button>
                </el-empty>
            </div>
        </el-dialog>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;
        
        createApp({
            setup() {
                // 登录状态
                const isLoggedIn = Vue.ref(false);
                
                // 当前激活的菜单
                const activeMenu = Vue.ref('id-query');
                
                // 身份证查询相关
                const idCard = Vue.ref('');
                const searching = Vue.ref(false);
                const showResult = Vue.ref(false);
                const searchResult = Vue.ref(null);
                
                // 身份证验证
                const isValidIdCard = Vue.computed(() => {
                    return /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idCard.value);
                });
                
                // 脱敏身份证号
                const maskedIdCard = Vue.computed(() => {
                    if (!searchResult.value) return '';
                    const id = searchResult.value.idCard;
                    return id.substring(0, 6) + '********' + id.substring(14);
                });
                
                // 筛选条件
                const filters = Vue.ref({
                    period: '30d',
                    grainType: '',
                    region: '',
                    minPrice: '',
                    maxPrice: ''
                });
                
                // 分页相关
                const currentPage = Vue.ref(1);
                const pageSize = Vue.ref(10);
                
                // 模拟数据
                const mockData = Vue.ref([
                    {
                        date: '2024-01-15',
                        farmerName: '张三',
                        grainType: '小麦',
                        quantity: 5.2,
                        price: 2800,
                        totalAmount: 14560,
                        region: '华北地区',
                        status: '已完成'
                    },
                    {
                        date: '2024-01-14',
                        farmerName: '李四',
                        grainType: '玉米',
                        quantity: 3.8,
                        price: 2600,
                        totalAmount: 9880,
                        region: '华东地区',
                        status: '已完成'
                    },
                    {
                        date: '2024-01-13',
                        farmerName: '王五',
                        grainType: '大豆',
                        quantity: 2.5,
                        price: 4200,
                        totalAmount: 10500,
                        region: '华南地区',
                        status: '处理中'
                    },
                    {
                        date: '2024-01-12',
                        farmerName: '赵六',
                        grainType: '水稻',
                        quantity: 4.1,
                        price: 3000,
                        totalAmount: 12300,
                        region: '华西地区',
                        status: '已完成'
                    },
                    {
                        date: '2024-01-11',
                        farmerName: '钱七',
                        grainType: '小麦',
                        quantity: 6.0,
                        price: 2850,
                        totalAmount: 17100,
                        region: '华北地区',
                        status: '已完成'
                    },
                    {
                        date: '2024-01-10',
                        farmerName: '孙八',
                        grainType: '水稻',
                        quantity: 3.2,
                        price: 3100,
                        totalAmount: 9920,
                        region: '华南地区',
                        status: '处理中'
                    }
                ]);
                
                // 筛选后的数据
                const filteredData = Vue.computed(() => {
                    if (!isLoggedIn.value) return [];
                    
                    let data = mockData.value;
                    
                    // 按粮食种类筛选
                    if (filters.value.grainType) {
                        const grainTypeMap = {
                            'wheat': '小麦',
                            'corn': '玉米',
                            'soybean': '大豆',
                            'rice': '水稻'
                        };
                        data = data.filter(item => item.grainType === grainTypeMap[filters.value.grainType]);
                    }
                    
                    // 按地区筛选
                    if (filters.value.region) {
                        const regionMap = {
                            'north': '华北地区',
                            'south': '华南地区',
                            'east': '华东地区',
                            'west': '华西地区'
                        };
                        data = data.filter(item => item.region === regionMap[filters.value.region]);
                    }
                    
                    // 按价格范围筛选
                    if (filters.value.minPrice) {
                        data = data.filter(item => item.price >= parseFloat(filters.value.minPrice));
                    }
                    if (filters.value.maxPrice) {
                        data = data.filter(item => item.price <= parseFloat(filters.value.maxPrice));
                    }
                    
                    return data;
                });
                
                // 应用筛选
                const applyFilters = () => {
                    ElMessage.success('筛选条件已应用');
                    currentPage.value = 1; // 重置到第一页
                };
                
                // 重置筛选
                const resetFilters = () => {
                    filters.value = {
                        period: '30d',
                        grainType: '',
                        region: '',
                        minPrice: '',
                        maxPrice: ''
                    };
                    ElMessage.info('筛选条件已重置');
                };
                
                // 分页处理
                const handlePageChange = (page) => {
                    currentPage.value = page;
                };
                
                const handleSizeChange = (size) => {
                    pageSize.value = size;
                    currentPage.value = 1;
                };
                
                // 设置激活菜单
                const setActiveMenu = (menu) => {
                    activeMenu.value = menu;
                };
                
                // 身份证查询
                const searchByIdCard = async () => {
                    if (!isValidIdCard.value) {
                        ElMessage.error('请输入正确的18位身份证号码');
                        return;
                    }
                    
                    searching.value = true;
                    
                    try {
                        // 模拟API调用
                        await new Promise(resolve => setTimeout(resolve, 2000));
                        
                        // 模拟查询结果
                        const mockResult = {
                            name: '张三',
                            idCard: idCard.value,
                            records: [
                                {
                                    date: '2024-01-15',
                                    grainType: '小麦',
                                    amount: 520,
                                    price: 2.8,
                                    company: '粮食收购公司'
                                },
                                {
                                    date: '2024-01-10',
                                    grainType: '玉米',
                                    amount: 380,
                                    price: 2.6,
                                    company: '粮食收购公司'
                                },
                                {
                                    date: '2023-12-20',
                                    grainType: '大豆',
                                    amount: 250,
                                    price: 4.2,
                                    company: '粮食收购公司'
                                }
                            ]
                        };
                        
                        searchResult.value = mockResult;
                        ElMessage.success('查询成功！');
                        
                    } catch (error) {
                        ElMessage.error('查询失败，请稍后重试');
                    } finally {
                        searching.value = false;
                    }
                };
                
                // 登录/登出功能
                const goToLogin = () => {
                    if (isLoggedIn.value) {
                        // 如果已登录，显示退出登录确认对话框
                        ElMessageBox.confirm('确定要退出登录吗？退出后将返回到身份证查询页面。', '退出登录', {
                            confirmButtonText: '确定退出',
                            cancelButtonText: '取消',
                            type: 'warning',
                            center: true
                        }).then(() => {
                            // 执行退出登录操作
                            isLoggedIn.value = false;
                            activeMenu.value = 'id-query'; // 返回到身份证查询页面
                            localStorage.removeItem('userInfo'); // 清除本地存储的用户信息
                            
                            // 清空查询相关数据
                            idCard.value = '';
                            searchResult.value = null;
                            showResult.value = false;
                            
                            ElMessage.success('已成功退出登录，返回到身份证查询页面');
                        }).catch(() => {
                            // 用户取消退出操作
                            console.log('用户取消退出登录');
                        });
                    } else {
                        // 未登录状态，跳转到登录页面
                        window.location.href = 'login.html';
                    }
                };
                
                // 页面加载时检查登录状态
                const checkLoginStatus = () => {
                    // 检查URL参数，看是否是从登录页面跳转过来的
                    const urlParams = new URLSearchParams(window.location.search);
                    const fromLogin = urlParams.get('from') === 'login';
                    
                    const userInfo = localStorage.getItem('userInfo');
                    if (userInfo) {
                        try {
                            const user = JSON.parse(userInfo);
                            if (user.username) {
                                // 如果是从登录页面跳转过来的，或者检测到有效的登录信息，则设置为已登录状态
                                if (fromLogin || user.loginTime) {
                                    isLoggedIn.value = true;
                                    activeMenu.value = 'data-filter'; // 登录后默认显示数据筛选
                                    ElMessage.success(`欢迎${fromLogin ? '' : '回来'}，${user.username}！`);
                                    
                                    // 清除URL参数
                                    if (fromLogin) {
                                        window.history.replaceState({}, document.title, window.location.pathname);
                                    }
                                    return;
                                }
                            }
                        } catch (error) {
                            // 如果解析失败，清除无效的登录信息
                            localStorage.removeItem('userInfo');
                        }
                    }
                    
                    // 默认显示未登录状态的身份证查询页面
                    isLoggedIn.value = false;
                    activeMenu.value = 'id-query';
                };
                
                // 页面加载完成后检查登录状态
                Vue.onMounted(() => {
                    checkLoginStatus();
                });
                
                return {
                    isLoggedIn,
                    activeMenu,
                    idCard,
                    searching,
                    showResult,
                    searchResult,
                    isValidIdCard,
                    maskedIdCard,
                    filters,
                    mockData,
                    filteredData,
                    currentPage,
                    pageSize,
                    setActiveMenu,
                    searchByIdCard,
                    applyFilters,
                    resetFilters,
                    handlePageChange,
                    handleSizeChange,
                    goToLogin
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>